<template>
  <div class="insurance-willing-container">
    <h2 class="title">投保意愿</h2>
    <div
      v-for="(item, i) in willingItems"
      :key="i"
      class="willing-item"
      :class="{ 'selected': selectedIndex == item.index }"
      @click="handleSelect(item)"
    >
      <h3>{{ item.title }}</h3>
      <p class="desc">{{ item.desc }}</p>
      <ul class="details">
        <li v-for="(detail, detailIndex) in item.details" :key="detailIndex">
          <span :class="`icon ${detail.iconType}`"></span>
          {{ detail.content }}
        </li>
      </ul>
      <span :class="`tag ${item.tagType}`">{{ item.tagText }}</span>
      <span class="radio" :class="{ 'checked': selectedIndex == item.index }"></span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { userInfoStrore } from '/@/stores/userInfoStore'

const store = userInfoStrore()
const selectedIndex = ref('01'); // 记录选中项的索引，默认选中第一项
const formfullData = ref({insuranceIntention: selectedIndex});
const formfullDataSeeion = JSON.parse(sessionStorage.getItem('formfullData'))
if(formfullDataSeeion) {
  formfullData.value.insuranceIntention = formfullDataSeeion.insuranceIntention
}
watch(()=>store.storeNum,(newValue,oldValue)=>{
  // store.getFormfullData({...formfullData.value,...store.storeFormfullData})
})
const willingItems = ref([
  {
    index: '01',
    title: '单保交强险',
    desc: '法定必购保险，保障第三方基本权益，是机动车上路行驶的必备保险',
    details: [
      { iconType: 'success', content: '包含机动车交通事故责任强制保险' },
      { iconType: 'info', content: '保障范围：第三者人身伤亡和财产损失' },
    ],
    tagType: 'primary',
    tagText: '法定必选',
  },
  {
    index: '02',
    title: '单保商业险',
    desc: '自愿购买，提供更全面的保障范围，需已购买交强险',
    details: [
      { iconType: 'success', content: '包含第三者责任险、车辆损失险等' },
      { iconType: 'info', content: '保障范围：更全面的第三者责任和车辆损失' },
    ],
    tagType: 'warning',
    tagText: '需已购买交强险',
  },
  {
    index: '03',
    title: '交强险+商业险',
    desc: '全面保障方案，包含法定与自愿保障，推荐选择',
    details: [
      { iconType: 'success', content: '包含交强险+商业险全部保障' },
      { iconType: 'info', content: '保障范围：法定基础保障+全面附加保障' },
    ],
    tagType: 'success',
    tagText: '推荐选择',
  },
]);

// 处理选中项的逻辑
const handleSelect = (v) => {
  console.log(v.index)
  selectedIndex.value = v.index;
  store.storeFormfullData.insuranceIntention = selectedIndex.value 
  // store.getFormfullData({...{insuranceIntention: selectedIndex},...store.storeFormfullData})
}
</script>

<style scoped>
.insurance-willing-container {
  width: 100%;
  padding: 16px;
  margin-top: 20px;
  background: #fff;
}
.title {
  font-size: 18px;
  text-align: left;
  font-weight: bold;
  margin-bottom: 16px;
}
.willing-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  font-size: 13px;
}
.willing-item.selected {
  border-color: #409eff;
}
.willing-item h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.desc {
  color: #666;
  text-align: left;
  margin-bottom: 8px;
}
.details {
  list-style: none;
  padding: 0;
  margin: 0;
}
.details li {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
}
.icon.success {
  background-color: #07c160;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
.icon.info {
  background-color: #409eff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
.tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}
.tag.primary {
  background-color: #409eff;
}
.tag.warning {
  background-color: #f7ba1e;
}
.tag.success {
  background-color: #07c160;
}
.radio {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.radio.checked {
  border-color: #409eff;
  background-color: #409eff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%;
}
</style>